<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>课程报名管理</title>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/common/table.css">
    <link rel="stylesheet" href="${ctx}/css/ui/activity/member_act_list.css">
    <%@include file="../include/commonFile.jsp" %>
</head>
<body>
<!--头部-->
<%@include file="../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp" %>
    <!--内容-->
    <section>
        <div class="section-main">
            <form class="layui-form" action="${ctx}/activity/course/applyList.do?actId=${activity.id}" id="myForm" method="post">
                <input type="hidden" name="pageNo" id="pageNo"/>
                <div class="f-search-bar">
                    <div class="search-container">
                        <ul class="search-form-content">
                            <li class="form-item-inline"><label class="search-form-lable phone-left"
                                                                style="text-indent: 13px;">手机号</label>
                                <div class="layui-input-inline" style="width: 213px;">
                                    <input type="text" name="mobile" autocomplete="off" class="layui-input"
                                           value="${withBuyer.mobile}"
                                           placeholder="请输入查询手机号"
                                    >
                                </div>
                            </li>
                            <li class="form-item-inline"><label class="search-form-lable">联系人</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="wechatNum" autocomplete="off" class="layui-input"
                                           value="${withBuyer.wechatNum}"
                                           placeholder="请输入查询微信号"
                                    >
                                </div>
                            </li>
                            <li class="form-item-inline"><label class="search-form-lable">报名状态</label>
                                <div class="layui-input-inline">
                                    <select name="checkStatus">
                                        <option value="">全部</option>
                                        <c:forEach var="map" items="${checkStatus}">
                                            <c:if test="${withBuyer.checkStatus == map.key}">
                                                <option value="${map.key}" selected="selected">${map.value}</option>
                                            </c:if>
                                            <c:if test="${withBuyer.checkStatus != map.key}">
                                                <option value="${map.key}">${map.value}</option>
                                            </c:if>
                                        </c:forEach>
                                    </select>
                                </div>
                            </li>
                        </ul>
                        <ul class="search-form-content">
                            <li class="form-item-inline"><label class="search-form-lable">报名方式</label>
                                <div class="layui-input-inline">
                                    <select name="counterfoilType">
                                        <option value="" selected="selected">全部</option>
                                        <option value="1" ${withBuyer.counterfoilType == 1 ?'selected="selected"':''}>免费</option>
                                        <option value="2" ${withBuyer.counterfoilType == 2 ?'selected="selected"':''}>在线付费</option>
                                        <%--<option value="3" ${withBuyer.counterfoilType == 3 ?'selected="selected"':''}>线下付费</option>--%>
                                    </select>
                                </div>
                            </li>
                            <li class="form-item-inline">
                                <div class="sub-btns">
                                    <a class="layui-btn layui-btn-danger"
                                       href="javascript:submitFunction('#myForm')">查询</a>
                                    <a class="layui-btn layui-btn-normal"
                                       href="javascript:resetFunction('#myForm')">重置</a>
                                </div>
                            </li>
                        </ul>
                        <ul class="search-form-content">
                            <li class="form-item"><label class="search-form-lable">报名时间</label>
                                <div class="check-btn-inner">
                                    <a id="all" href="javascript:void(0);"
                                       onclick="setTimeType($(this),0,'#myForm')" ${empty input.timeType || input.timeType == 0 ? 'class="active"' : ''}>全部</a>
                                    <a href="javascript:void(0);"
                                       onclick="setTimeType($(this),1,'#myForm')" ${input.timeType == 1 ? 'class="active"' : ''}>今天</a>
                                    <a href="javascript:void(0);"
                                       onclick="setTimeType($(this),2,'#myForm')" ${input.timeType == 2 ? 'class="active"' : ''}>本周内</a>
                                    <a href="javascript:void(0);"
                                       onclick="setTimeType($(this),3,'#myForm')" ${input.timeType == 3 ? 'class="active"' : ''}>本月内</a>
                                    <input type="hidden" name="timeType" value="${input.timeType}"/>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input class="layui-input" type="text" name="createStart"
                                               value="${input.createStart}" placeholder="开始日">
                                    </div>
                                    -
                                    <div class="layui-input-inline">
                                        <input class="layui-input" type="text" name="createEnd"
                                               value="${input.createEnd}" placeholder="截止日">
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </form>
            <div class="my-act-list-content">
                <ul class="num">
                    <div class="r">
                        <li style="cursor: pointer;" class="r">
                            <a class="layui-btn layui-btn-danger layui-btn-sm" id="btnExport">导出EXCEL</a>
                        </li>
                    </div>
                    <p class="cl"></p>
                </ul>
                <div class="cl">
                    <table class="layui-table" lay-skin="line" id="myTable">
                        <colgroup>
                            <col>
                            <col>
                            <col>
                            <col width="10%">
                            <col width="10%">
                            <col width="8%">
                            <%--<col width="8%">--%>
                            <col>
                            <col width="10%">
                            <col width="80px">
                        </colgroup>
                        <thead>
                        <tr>
                            <th>参与者</th>
                            <th>手机号</th>
                            <th>微信号</th>
                            <th>报名方式</th>
                            <th>金额</th>
                            <th>报名状态</th>
                            <%--<th>签到</th>--%>
                            <th>报名时间</th>
                            <th>操作</th>
                            <th style="text-align: center">展开</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach var="memberAct" items="${list}">
                            <tr class="info" data-id="${memberAct.id}" data-project-id="${memberAct.gatherProjectId}">
                                <td class="table-member"
                                    onclick="openDialogShow('用户名片','${ctx}/system/member/memberView.do?id=${memberAct.memberId}','400px','470px')">
                                    <div class="member-cell">
                                        <div class="member-logo common-img">
                                            <img src="<c:if test="${memberAct.logo != null}">${memberAct.logo}?imageMogr2/auto-orient/crop/200x150</c:if>" alt=""
                                                 onerror="txz.errImg(this)" onload="txz.imgLoad(this)">
                                        </div>
                                        <div class="member-name ellipsis-1"><a class="blue"
                                                                               title="${memberAct.realname}"
                                                                               href="javascript:void(0);">${memberAct.realname}</a>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div>${memberAct.mobile}</div>
                                </td>
                                <td>
                                    <div class="member-name ellipsis-1">${memberAct.wechatNum}</div>
                                </td>
                                <td>
                                    <div>
                                        <c:choose>
                                            <c:when test="${memberAct.counterfoilType == 1}">免费</c:when>
                                            <c:when test="${memberAct.counterfoilType == 2}">在线付费</c:when>
                                            <c:when test="${memberAct.counterfoilType == 3}">线下付费</c:when>
                                        </c:choose>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <c:if test="${memberAct.payment == 0}">免费报名</c:if>
                                        <c:if test="${memberAct.payment != 0}">¥${memberAct.payment}</c:if>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <c:choose>
                                            <c:when test="${memberAct.checkStatus == 0}">
                                                <span>审核中</span>
                                            </c:when>
                                            <c:when test="${memberAct.checkStatus == 1}">
                                                <span class="red">待支付</span>
                                            </c:when>
                                            <c:when test="${memberAct.checkStatus == 2}">
                                                <span>审核拒绝</span>
                                            </c:when>
                                            <c:when test="${memberAct.checkStatus == 3}">
                                                <span class="green">报名成功</span>
                                            </c:when>
                                            <c:when test="${memberAct.checkStatus == 4}">
                                                <span>已取消</span>
                                            </c:when>
                                            <c:when test="${memberAct.checkStatus == 5}">
                                                <span>未参与</span>
                                            </c:when>
                                        </c:choose>
                                    </div>
                                </td>
                                <%--<td>
                                    <div>${memberAct.signin == 1 ? '已签到' : '未签到'}</div>
                                </td>--%>
                                <td>
                                    <div><fmt:formatDate value="${memberAct.createDate}"
                                                         pattern="yyyy-MM-dd HH:mm"/></div>
                                </td>
                                <td class="opts-btns tb-opts" style="width: 150px">
                                    <div class="comm-opts">
                                        <c:if test="${memberAct.checkStatus == 0}">
                                            <a class="green"
                                               href="javascript:check('确认要审核通过该报名吗？', '${memberAct.id}', '1')"
                                               target="_self">通过</a>
                                            <a class="red"
                                               href="javascript:check('确认要审核拒绝该报名吗？', '${memberAct.id}', '2')"
                                               target="_self">拒绝</a>
                                        </c:if>
                                        <c:if test="${memberAct.checkStatus == 3}">
                                            <c:if test="${memberAct.counterfoilType == 1}">
                                                <a class="red"
                                                   href="javascript:check('确认要拒绝该报名吗？', '${memberAct.id}', '2')"
                                                   target="_self">拒绝</a>
                                            </c:if>
                                            <c:if test="${memberAct.counterfoilType == 2}">
                                                <a class="red"
                                                   href="javascript:check('确认要拒绝并退款该报名吗？', '${memberAct.id}', '2')"
                                                   target="_self">拒绝并退款</a>
                                            </c:if>
                                            <c:if test="${memberAct.counterfoilType == 3}">
                                                <c:if test="${memberAct.payStatus == 2}">
                                                    <a class="red setPay-btn"
                                                       href="javascript:lookLink('${memberAct.id}');" target="_self">标记为已付款</a>
                                                </c:if>
                                                <a class="red"
                                                   href="javascript:check('确认要拒绝该报名吗？', '${memberAct.id}', '2')"
                                                   target="_self">拒绝</a>
                                            </c:if>
                                        </c:if>
                                        <c:if test="${memberAct.checkStatus == 4}">
                                            <a href="javascript:txz.deleteObject('确定要删除吗？','${ctx}/activity/memberAct/delete.do?id=${memberAct.id}','该报名人员状态不允许删除');">删除</a>
                                        </c:if>
                                    </div>
                                </td>
                                <td>
                                    <div class="option">
                                        <i class="iconfont icon-unfold"></i>
                                        <i class="iconfont icon-fold dis-none"></i>
                                    </div>
                                </td>
                            </tr>
                            <tr class="dis-none info-detail">
                                <td colspan="9">
                                    <div>
                                        <table width="100%" class="childTable layui-table" lay-skin="row"
                                               style="margin: 0px">
                                            <tbody>
                                            <c:if test="${not empty memberAct.name}">
                                                <tr>
                                                    <td>联系人</td>
                                                    <td>${memberAct.name}</td>
                                                </tr>
                                            </c:if>
                                            <c:if test="${not empty memberAct.company}">
                                                <tr>
                                                    <td>公司名称</td>
                                                    <td>${memberAct.company}</td>
                                                </tr>
                                            </c:if>
                                            <c:if test="${not empty memberAct.jobTitle}">
                                                <tr>
                                                    <td>公司职位</td>
                                                    <td>${memberAct.jobTitle}</td>
                                                </tr>
                                            </c:if>
                                            <c:if test="${not empty memberAct.extra}">
                                                <tr>
                                                    <td>备注信息</td>
                                                    <td>${memberAct.extra}</td>
                                                </tr>
                                            </c:if>
                                            <c:if test="${not empty memberAct.remarks}">
                                                <tr>
                                                    <td>付款备注</td>
                                                    <td>${memberAct.remarks}</td>
                                                </tr>
                                            </c:if>
                                            </tbody>
                                        </table>
                                    </div>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                    <div id="page_content" class="page-container"></div>
                </div>
                <div class="f-def-dialog bmDialog">
                    <div class="f-dialog-shadow"></div>
                    <div class="f-dialog-content">
                        <span class="close-icon"><i class="iconfont icon-close"></i></span>
                        <div class="dialog-detail">
                            <p class="f16 gray">填写备注信息提交</p>
                            <form class="layui-form mt20" action="${ctx}/activity/memberAct/verify2.do" id="infoForm">
                                <input type="hidden" name="id" value=""/>
                                <div class="layui-form-item">
                                    <label class="layui-form-label" style="width: 30px;padding-left: 0px;">备注<span
                                            class="f-verify-red">*</span></label>
                                    <div class="layui-input-block" style="margin-left: 50px;">
                                        <textarea name="remarks" lay-verify="remarks" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block" style="margin-left: 60px">
                                        <a href="javascript:void(0)" class="layui-btn layui-btn-danger layui-btn-sm"
                                           lay-submit lay-filter="infoForm">立即提交</a>
                                        <a href="javascript:void(0)"
                                           class="layui-btn layui-btn-primary layui-btn-sm cancel-btn">取消</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--底部-->
        <%@include file="../include/footer.jsp" %>
    </section>
</div>
<script type="text/html" id="form_template">
    {{# for(var i = 0; i < d.fields.length; i++){ }}
        <tr class="other-info">
            {{# var thatValue = ''; }}
            {{# for(var j = 0; j < d.infos.length; j++){ }}
                {{# if(d.fields[i].id == d.infos[j].fieldId){ }}
                    {{# thatValue = d.infos[j].fieldValue }}
                {{# } }}
            {{# } }}
            <td><div style="word-break: break-all;">{{ d.fields[i].title }}</div></td>
            <td><div style="word-break: break-all;">{{ thatValue }}</div></td>
        </tr>
    {{# } }}
</script>
<script type="text/javascript" src="${ctx}/script/common/list.js"></script>
<script type="text/javascript" src="${ctx}/script/common/table_option.js"></script>
<script type="text/javascript">
    var laytpl = null, formItems;
    $(function () {
        layui.use(['laytpl'], function () {
            laytpl = layui.laytpl;
        });
    });

    txz.initHeader({
        nav: [{
            name: '课程管理'
        }, {
            name: '${activity.title}',
            curr: true
        }, {
            name: '报名管理',
            curr: true
        }],
        info: '<span class="f12">共 <b>${page.totalCount}</b> 条记录',
        btns: [{
            name: '返回',
            icon: 'back',
            href: '${ctx}/activity/course/courseList.do'
        }]
    });


    function check(content, memberActId, checkStatus) {
        layer.confirm(content, {
            icon: 3,
            title: '系统提示'
        }, function (index) {
            layer.close(index);
            $.post("${ctx}/activity/memberAct/verify.do", {
                id: memberActId,
                checkStatus: checkStatus
            }, function (data) {
                if (data.success == true) {
                    util.layerAlertSuccess("审核成功", function () {
                        window.location.reload();
                    })
                } else {
                    util.layerAlertError("审核失败")
                }
            })
        });
    }

    function lookLink(memberActId) {
        $("#infoForm").find("[name=id]").val(memberActId);
    }

    $(function () {
        //加载分页
        loadPageNew({
            elem: 'page_content',
            totalCount: '${page.totalCount}',
            limit: '${page.limit}',
            page: '${page.page}'
        });

        // 二维码弹窗显示/隐藏
        qrCodeDialog('.my-act-list-content', 'setPay-btn', 'td', '.bmDialog', 2);

        $(".cancel-btn").click(function () {
            $(this).closest('.f-def-dialog').fadeOut();
        });

        $('#myTable').delegate('.option', 'click', function (e) {
            var info = $(this).closest('.info');
            if (!info.hasClass('active')) {//打开
                var gatherProjectId = $(info).closest("tr").data("project-id");
                if (util.isValid(gatherProjectId)) {
                    var id = $(info).closest("tr").data("id");
                    var content = $(info).next(".info-detail").find("tr:last-child");
                    var length = $(info).next(".info-detail").find(".other-info").length;
                    if (length == 0) {
                        $.ajax({
                            type: 'get',
                            async: false, // 使用同步的方法
                            data: {
                                targetId: id,
                                projectId: gatherProjectId,
                                isNew: util.isValid(formItems) ? false : true
                            },
                            dataType: 'json',
                            success: function (res) {
                                if (res.success) {
                                    if (!util.isValid(formItems)) {
                                        formItems = res.data.fields;
                                    } else {
                                        res.data.fields = formItems;
                                    }
                                    var getTpl = $("#form_template").html();
                                    laytpl(getTpl).render(res.data, function (html) {
                                        content.after(html);
                                    });
                                }
                            },
                            url: '${ctx}/gatherForm/form/getFormInfoByTargetId.do'
                        });
                    }
                }
                $('.info').removeClass('active');
                $(".info-detail").removeClass('dis-block');
                info.toggleClass('active');
                $(info).next(".info-detail").addClass('dis-block');
            } else {
                info.toggleClass('active');
                $(info).next(".info-detail").removeClass('dis-block');
            }
        });

        $("#btnExport").click(function () {
            console.log("点击导出");
            layer.confirm('确认要导出报名人员的Excel吗?', {
                icon: 3,
                title: '系统提示'
            }, function (index) {
                var url = "${ctx}/activity/course/applyExport.do?actId=${activity.id}";
                var loadIndex = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
                $.post(url, $("#myForm").serialize(), function (res) {
                    top.layer.close(loadIndex);
                    if (res.success) {
                        window.location.href = res.data;
                    } else {
                        util.layerMsgError(res.description)
                    }
                });
                top.layer.close(index);
            });
        });

        layui.use(['form', 'laydate'], function () {
            var form = layui.form, laydate = layui.laydate;
            // 查询发布日期
            var start = {
                elem: 'input[name=createStart]'
            };

            var end = {
                elem: 'input[name=createEnd]'
            };
            laydate.render(start);
            laydate.render(end);
            //自定义验证规则
            form.verify({
                remarks: function (value) {
                    if (value == "") {
                        return '请填写备注';
                    }
                }
            });

            //监听提交
            form.on('submit(infoForm)', function (data) {
                txz.submitObject(data.elem, function (callBack) {
                    var action = $("#infoForm").attr("action");
                    $.post(action, $('#infoForm').serialize(), function (res) {
                        typeof callBack === 'function' && callBack();
                        if (res.success) {
                            util.layerMsgSuccess("提交成功", function () {
                                submitFunction('#myForm');
                            })
                        } else {
                            util.layerMsgError("提交失败")
                        }
                    });
                });
                return false;
            });
        });
    })
</script>
</body>
</html>